<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-01-09 16:13:20
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-24 10:55:58
 * @FilePath: \cxl-h5\src\components\input\Index.vue
-->
<template>
    <section class="input-container" :style="{ margin: margin }">
        <section
            :class="['label', labelAlign === 'left' ? '' : 'right']"
            :style="{
                width: label.length ? labelWidth + 'rem' : 0,
                paddingRight: paddingRight
            }"
        >
            <i v-if="required">*</i>
            <p>{{ label }}</p>
        </section>
        <section
            :class="['input-box ', inputFocus ? 'focus' : '', round ? 'round' : '', border ? 'border' : '']"
            :style="{ backgroundColor: bgColor, width: `calc(100% - ${labelWidth + 1}rem)` }"
        >
            <input
                ref="inputRef"
                :value="val"
                @input="onInput"
                @focus="onFocus"
                :type="type"
                :placeholder="placeholder"
                @blur="onBlur"
                v-fixedInput
                :style="{
                    paddingRight: inputFocus
                        ? clear && showPassword && val.length
                            ? '7rem'
                            : clear && val.length
                            ? '4rem'
                            : '2rem'
                        : showPassword && val.length
                        ? '4rem'
                        : '1.5rem'
                }"
            />
            <!-- 输入框右侧icon -->
            <section class="operation-icon">
                <section class="icon-item" v-if="clear && val.length" @click="onClearInput">
                    <div class="icon clear">
                        <span class="icon-box iconfont icon-shanchu"></span>
                    </div>
                </section>
                <section class="icon-item" v-if="showPassword && val.length" @click="onShowPassword">
                    <div class="icon show-password">
                        <template v-if="type === 'password'">
                            <span class="icon-box iconfont icon-eye"></span>
                        </template>
                        <template v-else>
                            <span class="icon-box iconfont icon-eye-close"></span>
                        </template>
                    </div>
                </section>
            </section>
        </section>
    </section>
</template>

<script lang="ts" setup>
import { Ref, ref, watchEffect } from 'vue'

//接收来自父级的形参
const props = defineProps([
    'modelValue',
    'type',
    'placeholder',
    'clearable',
    'showPassword',
    'required',
    'label',
    'labelWidth',
    'labelAlign',
    'round',
    'bgColor',
    'border',
    'margin',
    'paddingRight'
])

//注册父级回调
const emits = defineEmits(['update:modelValue', 'blur'])

const inputRef = ref()
//定义input输入框是否得到焦点
const inputFocus = ref(false)
//存放值
const val = ref('')
//定义input 类型
const type = ref('text')
//定义占位符 placeholder
const placeholder = ref('')
//是否显示清除内容icon
const clear = ref(false)
//是否显示密码
const showPassword = ref(false)
//input 类型改变
const changeType = ref(false)
//是否是必须的
const required = ref(false)
//标题内容
const label = ref('')
//标题宽度
const labelWidth: Ref<number | string> = ref('10')
//标题是靠左|靠右 left|right
const labelAlign = ref('left')
//是否是圆角
const round = ref(false)
//背景颜色
const bgColor = ref('#ffffff')
const border = ref(false)
//margin边距
const margin = ref('0px')
const paddingRight = ref('0rem')

//注册监听回调
watchEffect(() => {
    val.value = props.modelValue

    if (!changeType.value) {
        type.value = props.type
    }

    placeholder.value = props.placeholder
    clear.value = props.clearable === undefined ? false : true
    showPassword.value = props.showPassword === undefined ? false : true
    required.value = props.required === undefined ? false : true
    round.value = props.round === undefined ? false : true
    border.value = props.border === undefined ? false : true
    label.value = props.label === undefined ? '' : props.label
    bgColor.value = props.bgColor === undefined ? '#ffffff' : props.bgColor
    labelWidth.value = props.labelWidth === undefined ? '80' : parseInt(props.labelWidth)
    labelAlign.value = props.labelAlign === undefined ? 'left' : props.labelAlign
    margin.value = props.margin === undefined ? '0 0  var(--cxl-size-16) 0' : props.margin
    paddingRight.value = props.paddingRight === undefined ? (label.value.length ? '1rem' : '0') : props.paddingRight

    // console.log('clearable', props, props.clearable === undefined ? false : true)
})

//清楚输入框的内容
const onClearInput = () => {
    console.log('click')
    inputRef.value.focus()
    val.value = ''
    emits('update:modelValue', '')
}

//点击显示密码
const onShowPassword = () => {
    type.value = type.value === 'text' ? 'password' : 'text'
    console.log(inputRef.value.value.length)
    setTimeout(() => {
        // inputRef.value.focus()
        inputRef.value.selectionStart = inputRef.value.value.length
    }, 10)
    changeType.value = true
}

//向父级暴露输入的内容
const onInput = (res: any) => {
    emits('update:modelValue', res.target.value)
    val.value = res.target.value
}

//输入框获取焦点
const onFocus = () => {
    inputFocus.value = true
}

const onBlur = (res: any) => {
    inputFocus.value = false
    emits('blur', res)
}
</script>

<style scoped lang="scss">
.input-container {
    display: flex;
    align-items: center;
    height: var(--cxl-size-40);
    margin-bottom: var(--cxl-size-16);

    .label {
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: var(--cxl-size-13);
        &.right {
            justify-content: end;
        }
        i {
            margin-right: 0.5rem;
            color: red;
        }
        p {
            color: var(--cxl-text-color-regular);
        }
    }
}
.input-box {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    display: flex;
    // transition: all 0.15s;
    border-radius: var(--cxl-size-6);
    box-sizing: border-box;
    overflow: hidden;
    flex: 1;
    background-color: var(--cxl-color-f2f6f8);
    border: 1px solid transparent;
    &.focus {
        border-color: var(--cxl-border-color-2);
        box-shadow: 0 2px 0.5rem var(--cxl-boxshow-color);
        .clear {
            display: block;
        }
    }
    &.round {
        border-radius: calc(var(--cxl-size-40) / 2);
    }
    &.border {
        border: 1px solid var(--cxl-border-color-2);
    }

    input {
        width: 100%;
        box-sizing: border-box;
        border-radius: 0;
        border: none;
        height: 100%;
        padding: 0 1.5rem;
        font-size: var(--cxl-size-13);
        line-height: 100%;
        flex-grow: 1;
        color: var(--cxl-text-color-primary);
        background-color: transparent;
        border-width: 0;
        transform: rotateZ(0);

        &:focus {
            outline: none;
        }
        &::placeholder {
            font-size: var(--cxl-size-13);
            color: var(--cxl-color-999999);
        }
    }
}

.operation-icon {
    width: auto;
    height: 100%;
    flex-wrap: nowrap;
    display: flex;
    position: absolute;
    top: 0;
    right: 1rem;
    z-index: 10;
    .icon-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 100%;
        box-sizing: border-box;
    }
    .icon {
        width: 1.4rem;
        height: 1.4rem;
        position: relative;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        // border: 1px solid var(--cxl-color-f2f6f8);
    }
    .icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: var(--cxl-size-16);
    }

    .clear {
        display: none;
        // &::before,
        // &::after {
        //     content: '';
        //     width: 0.5rem;
        //     height: 1px;
        //     background-color: var(--cxl-color-f2f6f8);
        //     position: absolute;
        //     top: 50%;
        //     left: 50%;
        // }
        // &::before {
        //     transform: translate(-50%, -50%) rotate(45deg);
        // }
        // &::after {
        //     transform: translate(-50%, -50%) rotate(-45deg);
        // }
    }
}
</style>
